<template>
  <el-container>
    <el-row class="wrap" v-loading="loading" element-loading-text="拼命加载中">
      <el-col :span="24" class="warp-breadcrum">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/dashboard' }"><span style="color: #837e7c;font-weight: normal;">首页</span></el-breadcrumb-item>
          <el-breadcrumb-item><span style="color: #837e7c;font-weight: normal;">联系人管理</span></el-breadcrumb-item>
          <el-breadcrumb-item><span style="color: #5d9cec;font-weight: normal;">联系人组列表</span></el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>

      <el-col :span="24" class="wrap-main">
        <!--工具栏-->
        <el-col :span="24" class="gg-toolBar-wrap">
          <el-col :span="24" class="toolbar gg-toolBar">
            <el-form :inline="true" :model="formInline">
              <el-form-item>
                <el-input size="small" v-model="formInline.groupName" placeholder="输入联系人组名称" style="min-width: 240px;"
                          @keyup.enter.native="handleSearch"></el-input>
              </el-form-item>
              <el-form-item prop="taskStartDate">
                <el-date-picker size="small" type="date" placeholder="请选择更新时间" v-model="formInline.groupUpdateTime" style="width:152px;"
                                @keyup.enter.native="handleSearch"></el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" icon="el-icon-search" @click="handleSearch">搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-col>
        <!--表格区域-->
        <el-col :span="24" class="gg-tableMainWrap">
          <!--新建按钮-->
          <el-row class="gg-tableBtnWrap">
            <el-button type="primary" size="small" icon="el-icon-plus" @click="openAdd()">新建号码组</el-button>
          </el-row>
          <!--表格-->
          <el-row class="gg-tableWrap">
            <el-table :data="tableData" border highlight-current-row style="width: 100%;">
              <el-table-column prop="groupName" label="名称">
              </el-table-column>
              <el-table-column prop="groupDesc" label="描述">
              </el-table-column>
              <el-table-column prop="groupNum" label="号码数" width="100">
              </el-table-column>
              <el-table-column prop="groupUpdateTime" label="更新时间" sortable>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" type="primary" @click="openUpload()">上传</el-button>
                  <el-button size="mini" type="danger" @click="remove(scope.$index,scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>

          <!--分页插件-->
          <el-col :span="24" class="toolbar">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 50,100]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              style="float:right;">
            </el-pagination>
          </el-col>
        </el-col>
      </el-col>
    </el-row>

    <!--新增界面-->
    <el-dialog title="新建号码组" :visible.sync="addUsersFormVisible">
      <el-form :model="addUsersForm"  ref="addUsersForm" :rules="rules">
        <el-form-item label="名称:" :label-width="formLabelWidth" prop="groupName">
          <el-input class="gg-formInput" size="small" v-model="addUsersForm.groupName" auto-complete="off" placeholder="请输入号码组名称"></el-input>
        </el-form-item>
        <el-form-item label="描述:" :label-width="formLabelWidth" prop="groupDesc">
          <el-input class="gg-formInput" type="textarea" :autosize="{ minRows: 4, maxRows: 6}" size="small" v-model="addUsersForm.groupDesc" placeholder="请输入号码组描述"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addUsersFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSubmit('addUsersForm')">确 定</el-button>
      </div>
    </el-dialog>

    <!--上传界面-->
    <el-dialog title="新建号码组" :visible.sync="uploadFormVisible">
      <el-form :model="uploadForm"  ref="uploadForm">
        <el-form-item label="导入号码:" :label-width="formLabelWidth">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传excel/csv文件，其他格式目前不支持</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="uploadFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="uploadFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>

  </el-container>
</template>

<script>
  export default {
    name: "ContactPersonList",
    filters: {
      statusFilter(color) {
        const statusMap = {
          finished:'#04c18d',
          doing:'#409eff',
          draft: '#b59ae8',
          canceled: '#f56c6c',
          unfinished:'#e6a23c',
          unused:'#e6effb'
        };
        return statusMap[color]
      }
    },
    data() {
      return {
        total: 0,
        page: 1,
        limit: 10,
        loading: false,
        formLabelWidth: '120px',
        addUsersFormVisible:false,
        uploadFormVisible:false,
        currentPage: 1,
        formInline: {
          groupName: '',
          groupUpdateTime: '',
        },
        addUsersForm:{
          groupName:'',
          groupDesc:''
        },
        uploadForm:{},
        rules: {
          groupName: [
            { required: true, message: '请输入号码组名称', trigger: 'blur' },
          ],
          groupDesc: [
            { required: true, message: '请输入号码组描述', trigger: 'blur' }
          ],
        },
        tableData: [{
          groupName: '逾期一天人员',
          groupDesc: '逾期一天',
          groupNum: '1',
          groupUpdateTime:'2018-09-01 17:25:07'
        },{
          groupName: '逾期两天人员',
          groupDesc: '逾期两天',
          groupNum: '20',
          groupUpdateTime:'2018-09-01 17:25:07'
        }]
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      handleSearch() {
        console.log('submit!');
      },
      openAdd:function(){
        this.addUsersFormVisible = true
      },
      openUpload:function(){
        this.uploadFormVisible = true;
      },
      addSubmit:function(groupName){
        let that = this;
        this.$refs[groupName].validate((valid)=>{
          if(valid){
            that.addUsersFormVisible = false;
          }
        })
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      remove:function(index,row){
        let that = this;
        this.$confirm('确定要删除该条记录吗?','操作提示',{
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          type:"warning"
        }).then(()=>{
          this.$message({
            type:'success',
            message:'删除成功!',
          })
        }).catch(()=>{
          this.$message({
            type:'info',
            message:'已取消删除'
          })
        })
      },
    }
  }
</script>

<style scoped>
  .el-tag {
    padding: 0px 8px;
    height: 25px;
    line-height: 25px;
    font-size: 11px;
    color: #fff;
    border-radius: 12px;
    box-sizing: border-box;
    border:none;
  }
</style>
